<template>
  <div>
    <Card dis-hover :bordered="false">
      <Row>
        <Col span="3">
        <List class="ivu-sidebar">
          <span v-for="item in sidebar" :key="item.id" @click="changeTab(item.address)">
            <ListItem :class="item.address === tabId ? 'ivu-active' : ''">{{ item.name }}</ListItem>
          </span>
        </List>
        </Col>
        <Col span="21">
        <component :is="tabId"></component>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
  import conversion from "./conversion.vue"//项目转换情况反馈表
  import workLoad from "./workLoad.vue"//项目工作量反馈表
  import channel from "./channel.vue"//渠道转换情况反馈表
  import networkVisit from "./networkVisit.vue"//网络部到诊对话分析
  import projectTask from "./projectTask.vue"//项目任务推进表

  export default {
    name: "feedBackForm",
    components: {
      conversion,
      workLoad,
      channel,
      projectTask,
      networkVisit
    },
    data() {
      return {
        tabId: "conversion",
        sidebar: [
          { id: 1, name: "项目转换情况反馈表", address: "conversion" },
          { id: 2, name: "项目工作量反馈表", address: "workLoad" },
          { id: 3, name: "项目渠道转化情况反馈表", address: "channel" },
          { id: 4, name: "页面网络部到诊对话分析", address: "networkVisit" },
          { id: 5, name: "工作汇总", address: "projectTask" },
        ],
      };
    },
    methods: {
      changeTab(address) {
        this.tabId = address;
      },

    },

  };
</script>
<style>
  .ivu-sidebar span {
    cursor: pointer;
  }

  .ivu-active {
    font-weight: bold;
    color: #55b6ec;
  }
</style>